<!-- Copyright 2018 The Flutter Architecture Sample Authors. All rights reserved. -->
<!-- Use of this source code is governed by the MIT license that can be found -->
<!-- in the LICENSE file. -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flutter Architecture Samples</title>
  <link rel="shortcut icon" href="assets/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="assets/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="assets/favicon-16x16.png" sizes="16x16" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body {
      color: rgb(17, 17, 17);
    }

    .site-title {
      font-size: 4.2rem;
      margin-bottom: 0.25rem;
    }

    .button-blue {
      background-color: #3FBCCC;
      border-color: #3FBCCC;
    }

    a {
      color: #3FBCCC;
    }

    a:focus,
    a:hover,
    a:hover {
      color: #028A9C;
      border-color: #028A9C !important;
    }

    .button-blue:active,
    .button-blue:focus,
    .button-blue:hover {
      background-color: #028A9C;
      border-color: #028A9C;
    }

    .button-blue.button-outline:active,
    .button-blue.button-outline:focus,
    .button-blue.button-outline:hover {
      border-color: #028A9C;
      color: #028A9C;
    }

    .button-blue.button-clear,
    .button-blue.button-outline {
      background-color: transparent;
      color: #3FBCCC;
    }

    .button-blue.button-clear {
      border-color: transparent;
    }

    .site-subtitle {
      color: rgb(120, 120, 120);
      margin-bottom: 1.2rem;
    }

    .downloads {
      margin-bottom: 2.4rem;
    }

    h2 {
      color: rgb(70, 70, 70);
    }

    .site-header {
      margin-top: 3.2rem;
      margin-bottom: 1.2rem;
    }

    .container {
      max-width: 80rem;
    }

    .logo {
      max-width: 9rem;
      margin-right: 2.4rem;
      margin-bottom: 1.2rem;
      padding-left: 1.0rem;
    }

    .card {
      background-color: white;
      border-radius: 0.25rem;
      box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-height: 180px;
      padding: 2.4rem 2.4rem 1.2rem 2.4rem;
      border: solid transparent;
      border-bottom-color: transparent;
      border-bottom-color: #3FBCCC;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4rem;
    }

    .site-title-container {
      flex-basis: min-content;
    }

    .screenshot {
      margin-bottom: 2.4rem;
    }

    .screenshot img {
      -webkit-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.4);
      -moz-box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.4);
      box-shadow: 0px 10px 20px 0px rgba(50, 50, 50, 0.4);
    }

    /* Larger than mobile screen */

    @media (min-width: 40.0rem) {
      .screenshot {
        max-width: 16rem;
        float: right;
        margin-left: 2.4rem;
      }
    }

    /* Larger than tablet screen */

    @media (min-width: 80.0rem) {}

    /* Larger than desktop screen */

    @media (min-width: 120.0rem) {}

    .web-demo {
      border: 1px solid #3FBCCC;
      padding: 1px 3px;
      display: inline-block;
      border-radius: 3px;
      font-size: 0.8em;
      margin-left: 10px;
      text-transform: uppercase;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background: #1E272C;
        color: #d9e5fa;
      }

      .card {
        background: #262f34;
      }

      .site-subtitle {
        color: #9fa6b3;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row site-header">
      <div class="logo">
        <img src="assets/logo.png" alt="Flutter Architecture Samples Logo">
      </div>
      <div class="site-title-container">
        <h1 class="site-title">Flutter Architecture Samples</h1>
        <h5 class="site-subtitle">A gallery of app architectures</h5>
      </div>
    </div>

    <aside class="screenshot">
      <picture>
        <img src="assets/screenshot.png" alt="Screenshot of the app">
      </picture>
    </aside>
    <div class="content">
      <div class="description">
        <p>
          Flutter provides a lot of flexibility in deciding how to organize and
          architect your apps. While this
          freedom is very valuable,
          it can also lead to apps with large classes, inconsistent naming
          schemes, as well as mismatching or
          missing
          architectures. These types of issues can make testing, maintaining and
          extending your apps
          difficult.</p>
        <p>The Flutter Architecture Samples project demonstrates strategies to
          help solve or avoid these common
          problems.
          This project implements the same "Todos" app using different
          architectural concepts and tools.</p>
      </div>

      <div class="downloads">
        <a href="https://github.com/brianegan/flutter_architecture_samples/archive/main.zip"
          class="button button-blue">Download</a>
        <a href="https://github.com/brianegan/flutter_architecture_samples"
          class="button button-blue button-outline">Github</a>
      </div>

      <div class="card">
        <h3>Samples</h3>
        <ul>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/vanilla">Vanilla
              Lifting State Up
            </a>
            <a href="https://fas-vanilla.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a
              href="https://github.com/brianegan/flutter_architecture_samples/tree/main/inherited_widget">InheritedWidget</a>
            <a href="https://fas-inherited-widget.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/change_notifier_provider">ChangeNotifier
              + Provider</a>
            <a href="https://fas-change-notifier-provider.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a
              href="https://github.com/brianegan/flutter_architecture_samples/tree/main/freezed_provider_value_notifier">Freezed
              + Provider + Value Notifier</a>
            <a href="https://fas-freezed-provider-value-notifier.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/bloc_flutter">BLoC</a>
            <a href="https://fas-bloc-flutter.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/bloc_library">Bloc
              Library</a>
            <a href="https://fas-bloc-library.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/mobx">Mobx</a>
            <a href="https://fas-mobx.netlify.app" class="web-demo">Web Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/redux">Redux</a>
            <a href="https://fas-redux.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/simple_bloc_flutter">"Simple"
              BLoC Example</a>
            <a href="https://fas-simple-bloc.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/mvi_flutter">MVI</a>
            <a href="https://fas-mvi.netlify.app" class="web-demo">Web Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/scoped_model">scoped_model</a>
            <a href="https://fas-scoped-model.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/signals">signals</a>
            <a href="https://fas-signals.netlify.app" class="web-demo">Web
              Demo</a>
          </li>
        </ul>
      </div>

      <div class="card">
        <h3>Supporting code</h3>
        <ul>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/integration_tests">Integration
              Tests</a>
          </li>
          <li>
            <a href="https://github.com/brianegan/flutter_architecture_samples/tree/main/example/todos_repository">Todos
              Repository</a>
          </li>
        </ul>
      </div>

      <div class="card">
        <h3>Contributors</h3>
        <ul>
          <li>
            <a href="https://github.com/brianegan">Brian Egan</a>
          </li>
          <li>
            <a href="https://github.com/davidmarne">David Marne</a>
          </li>
          <li>
            <a href="https://github.com/passsy">Pascal Welsch</a>
          </li>
          <li>
            <a href="https://github.com/kinggolf">Larry King</a>
          </li>
          <li>
            <a href="https://github.com/franklinharper">Frank Harper</a>
          </li>
          <li>
            <a href="https://github.com/p69">Pavel Shilyagov</a>
          </li>
          <li>
            <a href="https://github.com/mmcc007">Maurice McCabe</a>
          </li>
          <li>
            <a href="https://github.com/leocavalcante">Leo Cavalcante</a>
          </li>
          <li>
            <a href="https://github.com/AndriousSolutions">Greg Perry</a>
          </li>
          <li>
            <a href="https://github.com/felangel">Felix Angelov</a>
          </li>
          <li>
            <a href="https://github.com/frideosapps">Francesco Mineo</a>
          </li>
          <li>
            <a href="https://github.com/pavanpodila">Pavan Podila</a>
          </li>
          <li>
            <a href="https://github.com/kush3107">Kushagra Saxena</a>
          </li>
          <li>
            <a href="https://github.com/GIfatahTH">Mellati Fateh</a>
          </li>
        </ul>
      </div>

      <div class="copyright">
        <p> &copy; 2025
          <a href="https://github.com/brianegan">Brian Egan</a> and contributors.
        </p>
      </div>
    </div>
  </div>
</body>

</html>
